<script lang="ts" setup>
import SearchArea from 've-search-area/index.vue'
import {Refresh, Search,} from '@element-plus/icons-vue'
import {onMounted, onUnmounted, reactive, ref} from 'vue'
import {FormInstance} from 'element-plus/es'
import {setPageInfo} from '@/assets/js/common'
import {ActuatorInfoDto} from "@/interface/dto/task/ActuatorInfoDto";
import {createEmitter} from "@/assets/js/eventBus.ts";

const emitter = createEmitter()

onMounted(() => {
  emitter.on('refresh', (e: any) => {
    setPageInfo(form, e);
    onSubmit()
  })
  onSubmit()
})

onUnmounted(() => {
  emitter.off('refresh')
})

const formRef = ref<FormInstance>()

const form = reactive<ActuatorInfoDto>({
  actuatorIp: "",
  actuatorName: ""
})

const show = ref(false)

const handleClick = (val: boolean) => {
  show.value = val
}

const emits = defineEmits(['onSubmit', 'onReset'])

const onSubmit = () => {
  emits('onSubmit', form)
}

const onReset = (formEl: FormInstance | undefined | any) => {
  if (!formEl) return
  formEl?.resetFields()
  emits('onReset', form)
}
</script>

<template>
  <SearchArea :click-show="true" @handleClick="handleClick">
    <template #searchBtn>
      <div class="search-btn">
        <el-button
            :icon="Search"
            type="primary"
            @click="onSubmit">查询
        </el-button>
        <el-button
            :icon="Refresh"
            plain
            type="primary"
            @click="onReset(formRef)">清空
        </el-button>
      </div>
    </template>
    <template #default>
      <el-form ref="formRef" :inline="true" :model="form">
        <el-form-item label="执行器名称" prop="actuatorName">
          <el-input v-model="form.actuatorName"
                    placeholder="请输入执行器名称" clearable/>
        </el-form-item>
      </el-form>
    </template>
  </SearchArea>
</template>

<style lang="scss" scoped>
</style>
